<template>
	<view class="top-container"></view>
	<view class="coupon-list">
		<!-- 循环渲染优惠券 -->
		<view class="coupon-item" v-for="(coupon, index) in coupons" :key="index">
			<!-- 优惠券背景图 -->
			<image src="/static/images/椭圆 3 拷贝.png" class="coupon-bg" mode="widthFix" />
			<!-- 左侧：使用范围 + 满减条件 -->
			<view class="coupon-info">
				<view class="coupon-scope">{{ coupon.scope }}</view>
				<view class="coupon-condition">{{ coupon.condition }}</view>
			</view>
			<!-- 右侧：优惠金额 -->
			<view class="coupon-amount">¥{{ coupon.amount }}</view>
			<!-- 底部：有效期 + 去使用按钮 -->
			<view class="coupon-footer">
				<view class="coupon-validity">{{ coupon.validity }}</view>
				<view class="coupon-use">去使用<image src="/static/images/04白色箭头.png" class="icon"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupons: [{
						scope: '仅限于XX加油站使用',
						condition: '满200元可用',
						amount: 20,
						validity: '有效期至：2020.04.11—2023.05.11'
					},
					{
						scope: '通用',
						condition: '满200元可用',
						amount: 20,
						validity: '有效期至：2020.04.11—2023.05.11'
					},
					{
						scope: '仅限于XX加油站使用',
						condition: '满200元可用',
						amount: 20,
						validity: '有效期至：2020.04.11—2023.05.11'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.top-container {
		background-color: #2176F3;
		height: 350rpx;
	}

	/* 优惠券列表容器（与顶部蓝色区域重叠调整） */
	.coupon-list {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		overflow: hidden;
		margin-top: -350rpx;
		padding: 20rpx;
	}

	/* 单个优惠券项（用于定位内部元素） */
	.coupon-item {
		position: relative;
		margin-bottom: 20rpx;
		color: #fff;
		/* 文字为白色，与橙色背景对比 */
	}

	/* 优惠券背景图（宽度自适应，高度随宽度等比） */
	.coupon-bg {
		width: 100%;
	}

	/* 左侧：使用范围 + 满减条件（绝对定位） */
	.coupon-info {
		position: absolute;
		left: 30rpx;
		top: 20rpx;
		display: flex;
		flex-direction: column;
	}

	/* 使用范围文字 */
	.coupon-scope {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	/* 满减条件文字（加粗） */
	.coupon-condition {
		font-size: 32rpx;
		font-weight: bold;
	}

	/* 右侧：优惠金额（绝对定位） */
	.coupon-amount {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		font-size: 48rpx;
		font-weight: bold;
	}

	/* 底部：有效期 + 去使用按钮（绝对定位 + Flex 布局） */
	.coupon-footer {
		position: absolute;
		left: 30rpx;
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		border-top: 2rpx dashed #fff;
		/* 减去左右内边距 */
	}

	/* 有效期文字 */
	.coupon-validity {
		font-size: 26rpx;
	}

	/* 去使用按钮（白色背景 + 橙色文字） */
	.coupon-use {
		
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	
	.icon{
		width: 20rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}
</style>